<template>
	<view>
		<view class="pagess">
			<uNavbar title="选车" bgColor="transparent" leftIconColor="#ffffff"  :titleStyle="titleStyle"></uNavbar>
			<view class="choose_box flex_ZC active2">
				<view class="car_box flex_ld">
					<view class="car_box_tit flex_Z">
						<view class="car_box_tit_l flex_dq">
							<image src="../../static/icon/i_car1.png" mode="aspectFill"></image>
							<text>厂商指导价</text>
						</view>
						<view class="car_number">
							<text>{{carList.market_price}}</text>
							<image class="car_bg1" src="../../static/image/car1.png" mode=""></image>
						</view>
					</view>
					<view class="car_box_tit flex_Z">
						<view class="car_box_tit_l flex_dq">
							<image src="../../static/icon/i_car1.png" mode="aspectFill"></image>
							<text>参与人数</text>
						</view>
						<view class="car_number">
							<text>{{carList.in_number}}</text>
							<image class="car_bg1" src="../../static/image/car1.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="carname flex_c">
					<text>{{carList.car_name}}</text>
				</view>
				<view class="car_img">
					<image class="bg1" src="../../static/image/car_bg.png" mode="aspectFill"></image>
					<image class="bg2" :src="carList.cover" mode="aspectFill"></image>
					<image class="carlogo" :src="carList.car_logo" mode="aspectFill"></image>
				</view>
				
				<view class="introduce">
					<view class="introduce_box flex_ld">
						<text class="f26 ">总配件量：{{carList.accessory_number}}</text>
						<text class="f26 ">配件总价：{{carList.accessory_total_price}}</text>
					</view>
					<view class="introduce_box flex_ld">
						<text class="f28 ">当前基金累计</text>
						<text class="f32 fw7">￥{{carList.accumulated_price}}</text>
					</view>
					<view class="progress flex_ld">
						<u-line-progress :percentage="carList.accumulated_ratio" height="12" inactiveColor="transparent"></u-line-progress>
					</view>
				</view>
			</view>
			<view class="empty2"></view>
					<!-- 	<view class="tips flex_Z">
							<text class="f30">小提示</text>
							<text class="f26">每一期开奖结束后，所有人通过开盲盒获得的免费配件都会随机移除20%，通过交易市场购买的配件仍然保留，</text>
						</view> -->
			<view class="btn_confirm flex_c" @click="$u.throttle(clickCarIndex, 500)">
					<text class="btnqr">确认</text>
			</view>
			<view class="empty"></view>
		</view>

	</view>
</template>

<script>
	import {chooseTarget,lastCarpool} from "../../api/mycar.js";
	export default {
		data() {
			return {
				ids: '',
				navId:1,
				sumNumber: 45, //比例
				carList: [],
				titleStyle: {
					color: '#ffffff'
				},
				navList: [],
			}
		},
		onLoad() {
			this.initDetail()
		},

		methods: {
			// 计算总价
			totalPrice(allPrice, leiji) {
				console.log(allPrice * 100, leiji * 100);
				return ((allPrice * 100) / (leiji * 100)).toFixed(2)
			},
			initDetail(){
				lastCarpool({}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.carList = res.data
					}
				})
			},
			clickCarIndex() {
				let data = {
					target_id: this.carList.id
				}
				chooseTarget(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						setTimeout(function() {
							uni.redirectTo({
								url: '/pagesMy/nationalCarPooling/carIndex'
							})
						}, 1500);
					}
				})

			},
			goBack() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		},
	}
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}
	.navigation {
		position: relative;
		width: 620rpx;
		height: 64rpx;
		background: #162430;
		margin: 30rpx auto;
		overflow-x: auto;
	}

	.navigation_box {
		width: 50%;
		height: 64rpx;
		font-size: 32rpx;
		color: #ffffff60;
		z-index: 9;
	}

	.active {
		position: relative;
		color: #ffffff;
		background: url('../../static/image/car_nav.png');
		background-size: 100% 100%;
	}

	.active::before {
		content: '';
		position: absolute;
		top: -50rpx;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: url('../../static/image/car_xz.png');
		background-size: 100% 100%;
	}

	.pagess {
		width: 100%;
		min-height: 100vh;
		background: #10191F;
	}

	.mask {
		width: 100%;
		height: 50rpx;
	}

	.choose_box {
		position: relative;
		width: 620rpx;
		height: 680rpx;
		margin: 26rpx auto 0;
		box-shadow: inset 0rpx 0rpx 30rpx 0rpx #1C85DB;
		opacity: 0.7;
		overflow: hidden;
	}

	.paly_txt {
		font-size: 44rpx;
		color: #ffffff;
	}

	.active2 {
		opacity: 1;
		box-shadow: inset 0rpx 0rpx 50rpx 20rpx #1C85DB;
		/* animation: redBall 6s linear normal infinite; */
	}

	@keyframes redBall {
		0% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(0, 255, 213), -20px 0 80px rgb(67, 160, 71), inset 0 0 50px #fff, inset -200px 0 80px rgb(0, 230, 118);
		}

		25% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(0, 188, 212), -20px 0 80px rgb(126, 87, 194), inset 0 0 50px #fff, inset -100px 0 80px rgb(0, 64, 255);
		}

		50% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(126, 87, 194), -20px 0 80px rgb(244, 143, 177), inset 0 0 50px #fff, inset 0px 0 80px rgb(245, 0, 87);
		}

		75% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(0, 64, 255), -20px 0 80px rgb(126, 87, 194), inset 0 0 50px #fff, inset -100px 0 80px rgb(0, 188, 212);
		}

		100% {
			box-shadow: 0 0 20px #fff, 20px 0 80px rgb(0, 230, 118), -20px 0 80px rgb(67, 160, 71), inset 0 0 50px #fff, inset -200px 0 80px rgb(0, 255, 213);
		}
	}

	.car_box {
		width: 100%;
		color: #ffffff;
		padding: 20rpx 30rpx;
		/* background: pink; */
	}

	.car_box_tit {
		font-size: 26rpx;
	}

	.car_box_tit_l>image {
		width: 22rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.car_img {
		position: relative;
		width: 576rpx;
		height: 506rpx;
		/* background: pink; */
	}

	.bg1 {
		width: 150%;
		height: 150%;
		position: absolute;
		top: -270rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
	}

	.bg2 {
		position: absolute;
		top: 30rpx;
		left: 0;
		width: 540rpx;
		height: 320rpx;
		z-index: 3;
	}
	.carlogo{
		position: absolute;
		top: 270rpx;
		right: 40rpx;
		width: 60rpx;
		height: 74rpx;
		z-index: 3;
	}

	.car_number {
		position: relative;
		width: 212rpx;
		margin-top: 24rpx;
		background: pink;
	}

	.car_number>text {
		position: absolute;
		top: -24rpx;
		left: 20rpx;
		font-size: 48rpx;
		z-index: 2;
		font-family: 'iconfont2';
	}

	.car_bg1 {
		position: absolute;
		top: 0;
		left: 0;
		max-width: 320rpx;
		height: 48rpx;
		z-index: 1;
	}
	.carname{
		position: absolute;
		top: 436rpx;
		left: 0;
		width: 100%;
		/* background: pink; */
		font-family: 'iconfont2';
		color: #ffffff;
		font-size: 48rpx;
		z-index: 999;
		letter-spacing: 8rpx;
	}

	.introduce {
		position: absolute;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 88%;
		color: #ffffff;
	}

	.progress {
		padding: 8rpx 10rpx;
		background: #153f4a;
		border-radius: 40rpx;
		margin-top: 20rpx;
	}


	.btn_confirm {
		position: fixed;
		bottom: 30rpx;
		width: 100%;
		height: 80rpx;
		background: #10191F;
		margin: 0 auto;
		z-index: 9;
	}
	.btnqr{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		box-shadow: inset 0rpx 0rpx 30rpx 0rpx #1C85DB;
		font-size: 36rpx;
		color: #ffffff;
		z-index: 9;
	}
	.tips{
		position: fixed;
		bottom: 120rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		color: #ffffff;
	}
	.tips>text:nth-child(2){
		color: #ffffff90;
	}
	.tip_btn{
		width: 690rpx;
		padding: 20rpx 0;
		margin: 30rpx auto;
		color: #ffffff;
		font-size: 36rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
	}

	/deep/.u-line-progress__line {
		background: linear-gradient(90deg, #7bb9ec 0%, #2693EC 100%);
	}
</style>